<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 500px;
            width: 500px;
            background: greenyellow;
        }
    </style>
    <script src="../js/common/vue/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-on:click="b()">
        <h2> div和里面的button都有点击事件当点击按钮时，必然会触发按钮和div的点击事件，当加了stop修饰符后父元素相同事件不在触发，可以通过删除 .stop 体会 </h2>
        <button v-on:click.stop="a()" value="按钮">按钮</button>
    </div>
    <br>
    <br>
    <h2>有些元素只带事件比如 submit ,prevent可以禁用自带的事件，可以通过删除 prevent 修饰感受</h2>
    <form action="https://www.baidu.com/ ">
        <input type="submit" value="提交" v-on:click.prevent="c()" >
    </form>
    <br>
    <h2>键盘监听事件keyup 表示监听所有按钮 .按钮名表示只监听这也给按钮 </h2>
    <input type="text" v-on:keyup.a="f()">
    <h2>只调用一次修饰符。修饰符可以多个吗？</h2>
    <button v-on:click.once="e()" value="只调用一次">只调用一次</button>
    <br>
    <br>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: "提示"
        },
        methods: {
            a: function () {
                console.dir("按钮被点击");
            },
            b: function () {
                console.dir("div被点击");
            },
            c:function () {
                console.dir("提交自定义事件");
            },
            f:function () {
                alert('用户点击了键盘上的a按钮');
            },
            e:function () {
                alert('只调用一次');
            }
        }
    })

</script>
</body>
</html>